<template>
  <div class="my-staff-wrap">

    <div class="my-staff-search">
      <div class="my-staff-select1">
        <popup-picker :data="workStatusList" v-model="workStatus" class="staff-pop" placeholder="全部员工"
                      @on-hide="selectWorkStatus" id="picker1"></popup-picker>
        <img src="../../../images/drop_down.png" class="pic1"/>
      </div>

      <div class="my-staff-select2">
        <datetime format="YYYY-MM" v-model="staffMonth" class="staff-date-time" :end-date="endDate"
                  @on-confirm="selectMonthStaff" placeholder="全部月份"></datetime>
        <img src="../../../images/drop_down.png" class="pic1"/>
      </div>

      <span class="clear-staff-Filtrate" @click="clearFiltrateStaff" v-show="showFiltrate">清空筛选条件</span>

      <img src="../../../images/search_icon2.png" class="pic2" onclick="return false" @click="openStaffSearch"/>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="van-shop-staff-item"
    >
      <div class="my-staff-box">
        <div class="my-staff-total" v-if="workNum">
          <span class="staff-total">人数：{{workNum}}人</span>
        </div>

        <div class="shop-staff-list" v-for="(staff,index) in staffList" :key="index">

          <div class="shop-staff-item-box1">
            <div class="shop-staff-item-info" :class="{'shop-staff-item-close':staff.staffMark}">
              <img :src="staff.userUrl" class="pic1" v-if="staff.userUrl"/>
              <span class="pic2" v-else></span>

              <span class="shop-staff-name">{{staff.userName}}</span>
              <span class="shop-staff-status-work" v-if="staff.workStatus == 1">在职</span>
              <span class="shop-staff-status-leave" v-else-if="staff.workStatus == 2">离职</span>
              <img src="../../../images/call.png" class="pic3" @click="callMobile(assistant.userTel)"/>

              <div class="down-box" v-if="staff.staffMark" @click="open(index)">
                <img src="../../../images/down_down.png" class="pic4"/>
              </div>
              <div class="down-box" v-else @click="close(index)">
                <img src="../../../images/down_up.png" class="pic4"/>
              </div>
            </div>
          </div>

          <div class="shop-staff-item-box2" v-show="!staff.staffMark">
            <span class="entry-company">入职企业：{{staff.mechanismName}}</span>
            <span class="entry-time">入职日期：{{staff.beginTime}}</span>
          </div>
        </div>

      </div>
    </van-list>

    <v-empty :logo="require('../../../images/no_data.png')" title="没有数据记录~"
             v-if="staffList.length == 0 && !loading"></v-empty>

    <div class="load-shade-box" v-show="showShade"></div>

  </div>

</template>

<script>
  import {PopupPicker} from 'vux';
  import {Datetime} from 'vux';
  import {getMyStaffList} from "../../../axios/api";
  import {formatDate} from "../../../config/util";
  import empty from '../../../components/empty';

  export default {
    data() {
      return {
        workStatus: [],
        workStatusList: [['全部员工', '在职', '离职']],
        staffMonth: "",
        endDate: "",
        showFiltrate: false,
        userMark: "",
        staffList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        showShade: false,
        workNum: 0
      }
    },
    created() {
      this.endDate = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryMyStaffList();
            this.timer = null;
          }, 500)
        }
      },
      queryMyStaffList() {

        let params = {
          "sgin": this.userMark,
          "page": this.page,
          "size": this.size,
          "time": this.staffMonth,
          "workStatus": this.changeWorkStatus(String(this.workStatus)),
        };
        this.showShade = true;
        getMyStaffList(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null && res.data.length > 0) {
              this.workNum = res.data[0].num;
              this.staffList = this.staffList.concat(res.data);
              this.staffList.forEach((value) => {
                this.$set(value, "staffMark", true);
                if (value.beginTime) {
                  value.beginTime = formatDate(new Date(value.beginTime), 'yyyy-MM-dd');
                }
              });

              this.loading = false;
              this.page++;
            } else {
              this.loading = false;
              if (this.staffList.length >= res.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
          this.showShade = false;
        });
      },
      selectWorkStatus(type) {//员工状态
        if (type) {
          this.initVanList();
        }
      },
      selectMonthStaff(value) {//选择月份
        this.staffMonth = value;
        this.showFiltrate = true;
        this.initVanList();
      },
      clearFiltrateStaff() {//清空筛选
        this.showFiltrate = false;
        this.staffMonth = "";
        this.workStatus = [];
        this.initVanList();
      },
      initVanList() {
        this.page = 1;
        this.size = 20;
        this.staffList = [];
        this.workNum = 0;
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      openStaffSearch() {//搜索页
        this.$router.push("/staffSearchPage");
      },
      callMobile(phone) {
        window.location.href = 'tel://' + phone;
      },
      open(index) {//展开
        for (let i = 0, length = this.staffList.length; i < length; i++) {
          if (index == i) {
            this.staffList[i].staffMark = false;
            break;
          }
        }
      },
      close(index) {//关闭
        for (let i = 0, length = this.staffList.length; i < length; i++) {
          if (index == i) {
            this.staffList[i].staffMark = true;
            break;
          }
        }
      },
      changeWorkStatus(status) {
        if (status == "在职") {
          return 1;
        } else if (status == "离职") {
          return 2;
        } else {
          return "";
        }
      }
    },
    components: {
      Datetime,
      PopupPicker,
      "v-empty": empty
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .my-staff-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .my-staff-search {
      position: fixed;
      z-index: 100;
      top: 0;
      display: flex;
      align-items: center;
      .wh(100%, 1.067rem);
      background: rgba(255, 255, 255, 1);
      .my-staff-select1 {
        display: flex;
        align-items: center;
        margin-left: 0.32rem;
        margin-right: 0.48rem;
        .staff-pop {
          padding-right: 0.2rem;
          .size-color(0.4rem, rgba(51, 51, 51, 1));
        }
        .staff-pop /deep/ .vux-cell-primary .vux-popup-picker-placeholder {
          color: rgba(51, 51, 51, 1)
        }
        .staff-pop /deep/ .vux-cell-primary .vux-popup-picker-value,.vux-cell-value{
          color: #3cafff
        }
      }
      .my-staff-select2 {
        display: flex;
        align-items: center;
        .staff-date-time {
          padding-right: 0.2rem;
          .size-color(0.4rem, rgba(51, 51, 51, 1));
        }
        .staff-date-time /deep/ .weui-cell__ft .vux-cell-placeholder {
          color: rgba(51, 51, 51, 1)
        }
        .staff-date-time /deep/ .weui-cell__ft .vux-cell-value {
          color: #3cafff
        }
      }
      .pic1 {
        .wh(0.267rem, 0.267rem);
      }

      .clear-staff-Filtrate {
        margin-left: 0.667rem;
        text-align: center;
        line-height: 0.587rem;
        .wh(2.4rem, 0.587rem);
        background: rgba(235, 247, 255, 1);
        border-radius: 0.293rem;
        .size-color(0.32rem, rgba(60, 175, 255, 1));
      }

      .pic2 {
        margin-left: auto;
        margin-right: 0.32rem;
        .wh(0.48rem, 0.48rem);
      }
    }
    .van-shop-staff-item{
      position: absolute;
      top: 1.067rem;
      .wh(100%, auto);
      .my-staff-box {
        .wh(100%, auto);
        .my-staff-total {
          display: flex;
          align-items: center;
          .wh(100%, 0.8rem);
          .staff-total {
            margin-left: auto;
            margin-right: 0.32rem;
            .size-color(0.347rem, rgba(153, 153, 153, 1));
          }
        }
        .shop-staff-list {
          display: flex;
          flex-direction: column;
          .wh(100%, auto);
          .shop-staff-item-box1 {
            .wh(100%, auto);
            background: #FFF;
            .shop-staff-item-info {
              display: flex;
              align-items: center;
              .wh(96.8%, 1.333rem);
              background: #FFF;
              margin-left: 0.32rem;
              .pic1 {
                .wh(0.88rem, 0.88rem);
                border-radius: 50%;
              }
              .pic2 {
                .wh(0.88rem, 0.88rem);
                background: rgba(242, 242, 242, 1);
                border-radius: 50%;
              }
              .shop-staff-name {
                .ellipsis(2.4rem);
                padding-left: 0.387rem;
                padding-right: 0.347rem;
                .size-color(0.427rem, rgba(51, 51, 51, 1));
              }
              .shop-staff-status-work {
                .wh(0.96rem, 0.48rem);
                border: 0.027rem solid rgba(60, 175, 255, 1);
                border-radius: 0.053rem;
                .size-color(0.347rem, rgba(60, 175, 255, 1));
                text-align: center;
                line-height: 0.48rem;
              }
              .shop-staff-status-leave {
                .wh(0.96rem, 0.48rem);
                text-align: center;
                line-height: 0.48rem;
                border: 0.027rem solid rgba(255, 166, 61, 1);
                border-radius: 0.053rem;
                .size-color(0.347rem, rgba(255, 166, 61, 1));
              }
              .pic3 {
                margin-left: auto;
                margin-right: 2rem;
                .wh(0.533rem, 0.533rem);
              }
              .down-box {
                margin-right: 0.32rem;
                .fj(center, center);
                .wh(0.8rem, 0.8rem);
                .pic4 {
                  .wh(0.373rem, 0.373rem);
                }
              }
            }
            .shop-staff-item-close {
              border-bottom: 0.027rem solid #f5f5f5;
            }
          }
          .shop-staff-item-box2 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            background: #f5f5f5;
            .wh(100%, 1.6rem);
            .entry-time {
              padding-left: 0.4rem;
              .size-color(0.347rem, rgba(153, 153, 153, 1));
            }
            .entry-company {
              padding-bottom: 0.2rem;
              padding-left: 0.4rem;
              .size-color(0.347rem, rgba(153, 153, 153, 1));
            }
          }
        }
      }
    }
    .load-shade-box {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
  }
</style>
